<template>
  <div class="w-h-full main ">
    <!-- 标题 -->
    <div class="main__title ">建筑饰面智能诊断系统 </div>
    <!-- 输入 -->
    <div class="main__input input">
      <ElInput v-model="userBody.username" class="input__el" placeholder="请输入用户名">
        <template #prepend>
          <ElIcon>
            <User></User>
          </ElIcon>
        </template>
      </ElInput>
      <ElInput v-model="userBody.password" class="input__el" placeholder="请输入密码">
        <template #prepend>
          <ElIcon>
            <Lock></Lock>
          </ElIcon>
        </template>
      </ElInput>
    </div>
    <!-- 注册 -->
    <div class="register ">
      <div class="register__password ">
        <div style="flex: 1;" class=""><el-checkbox label="记住密码" size="large" style=" height: 100%" />
        </div>
        <div style="flex: 1;color: gray;" class=" flex-right text-xs">忘记密码</div>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="main__button ">
      <ElButton style="width: 80%;" round type="primary" @click="emit('clickLogin')">登录</ElButton>
    </div>
  </div>
</template>

<script lang="ts" setup>
const userBody = ref({
  username: "",
  password: "",
});

const emit = defineEmits(["update:body", "clickLogin"]);

watch(
  userBody,
  (newVal) => {
    emit("update:body", newVal);
  },
  {deep: true}
);
</script>

<style lang="scss" scoped>
@mixin block($block) {
  .#{$block} {
    @content;
  }
}

@mixin element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}

@include block(main) {
  display: flex;
  flex-direction: column;
  @apply p-4;

  @include element(title) {
    flex: 1;
    letter-spacing: 0.5rem;
    @apply flex justify-center items-center text-3xl;
  }

  @include element(input) {
    flex: 2;
  }

  @include element(button) {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@include block(register) {
  height: 40px;
  // margin-top: -2rem;
  @apply flex flex-col items-center;

  @include element(password) {
    flex: 1;
    width: 80%;
    @apply flex;


  }
}

@include block(input) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  @apply gap-4;

  @include element(el) {
    width: 80%;
    height: 40px;
  }
}
</style>
